// 侧栏导航
<template>
  <!-- :collapse="isCollapse" 控制折叠 -->
  <!-- default-active="1-4-1" 选中展开的项 -->
  <el-menu
    default-active="1"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#324156"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item :index="item.id" v-for="item in noChildren" :key="item.path">
      <i :class="item.icon"></i>
      <span slot="title" @click="menuJump(item)">{{ item.lable }}</span>
    </el-menu-item>
    <el-submenu :index="item.id" v-for="item in hasChildren" :key="item.path">
      <template slot="title">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.lable }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item
          :index="optionItem.id"
          v-for="optionItem in item.children"
          :key="optionItem.path"
          @click="menuJump(optionItem)"
          >{{ optionItem.lable }}</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";
import { request } from "../api/request/index";
export default {
  methods: {
    // 导航跳转
    menuJump(item) {
      this.$router.push(item.path);
      this.$store.commit("nav/breadcrumb", item);
    },
  },
  computed: {
    noChildren() {
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
    ...mapState("nav", {
      isCollapse: (state) => state.isCollapse,
      menu: (state) => state.menu,
    }),
  },
};
</script>

<style lang="less" scoped>
.el-menu {
  padding-top: 80px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 657px;
}
.el-menu--collapse {
  height: 657px;
}
</style>